<!--
 * @Author: your name
 * @Date: 2020-12-02 10:08:46
 * @LastEditTime: 2021-02-03 15:02:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\group\group.vue
-->
<template>
    <div class='groupList-main-box'>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">NMI</span>
                <el-input v-model="nmi" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <!-- <div class="search-box-sub">
                <span class="lable-text">类型</span>
                <el-select v-model="type" filterable placeholder="请选择" clearable >
                    <el-option
                        v-for="item in typeList"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div> -->
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" slot="reference"  icon='el-icon-download' class="marginR10" @click="()=>{$store.commit('setNewVisiblePvModules',true)}">{{$t('import')}}</el-button>
            <el-button type="primary"  icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setNewVisibleGroup',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                :confirm-button-text="$t('sure')"
                :cancel-button-text="$t('cancel')"
                :title="$t('promotionManagement.allDelete')"
                @confirm='vppinverterDeleteBatch()'
            >
                <el-button type="primary" slot="reference"  icon='el-icon-delete' class="marginR10" >{{$t('delete')}}</el-button>
            </el-popconfirm>
            <a href="javascript:;" style="color:#3c8dbc;" @click='()=>{$router.push({path:"/group"})}'> {{$t('group.returnGroupName')}}</a>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' :select='true' @selection-change="handleSelectionChange($event)">
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit"  @click='editGroup(data)' class="marginR10" :title="$t('edit')"></el-button>
                    <el-popconfirm
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        :title="$t('index.delete_item_confirm')"
                        @confirm='deleteRow(data.sid)'
                    >
                        <el-button class="marginR10" type="" slot="reference" icon='el-icon-delete' :title="$t('delete')"></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' :groupId='$route.query.groupId' v-if='newVisibleGroup'></add>
        <importModal @uploadData='query' :groupId='$route.query.groupId' v-if='newVisiblePvModules'></importModal>
        <edit @uploadData='query' :editDataList='editDataList'></edit>
        
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import add from './add'
import edit from './edit'
import importModal from './importData'
export default {
    components: {
        baseTable,
        add,
        edit,
        importModal
    },
    props: {

    },
    data() {
        return {
            nmi:"",
            size:10,
            current:1,
            total:1,
            typeList:[{
                id:'0',
                text:"VPP"
            },{
                id:'1',
                text:"SAPN"
            }],
            loading:false,
            dataRows:[],
            selectDataList:[],
            column:[{
                title: 'NMI',
                value: 'nmi',
                slot: 'nmi',
            },
            {
                title: this.$t('device.inverter.updateTime'),
                value: 'updateTime',
                slot: 'updateTime',
            },
            {
                title: '操作',
                value: 'option',
                slot: 'option',
            }],
            editDataList:{}
        };
    },
    computed: {
        newVisibleGroup(){
            return this.$store.state.sysStore.newVisibleGroup
        },
        newVisiblePvModules(){
            return this.$store.state.sysStore.newVisiblePvModules
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.vppinverterGetPage()
    },
    methods: {
        downLoadGroup(row){
            // window.open('vppgroup/exportSapnInverter.do?groupId='+row.sid)
            this.comm.windowOpen('/vppgroup/exportSapnInverter?groupId='+row.sid)
        },
        editGroup(data){
            this.editDataList = data
            this.$store.commit('setNewVisibleEdit',true)
        },
        async deleteRow(id){
            let res = await this.API.vppinverterDeleteBatch({
                ids:id
            })
            if(this.comm.showMsg(res.success)){
                this.vppinverterGetPage()
            }
        },
        async vppinverterDeleteBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res = await this.API.vppinverterDeleteBatch({
                ids:this.selectDataList.map(item=>{
                    return item.sid
                })
            })
            if(this.comm.showMsg(res.success)){
                this.vppinverterGetPage()
            }
        },
        async vppinverterGetPage(){
            this.loading = true
            let res = await this.API.vppinverterGetPage({
                NMI:this.nmi,
                groupType: 1,
                size:this.size,
                current:this.current,
                groupId:this.$route.query.groupId
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        query(){
            this.vppinverterGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.vppinverterGetPage()
        },
        handleCurrentChange(val) { 
          this.current = val
          this.vppinverterGetPage()
        },
        handleSelectionChange(val){
          this.selectDataList=val
        },
    },
};
</script>

<style  lang="less" scoped>
.groupList-main-box{

}
</style>
